<div class="container-fluid">
	<div class="row-fluid">
		<div class="span6">
			<div class="page-header well well-small">
				<h2>{{spot.name}} <small>{{spot.address|cityState}}</small></h2>
			</div>
			<ul class="nav nav-pills">
				<li class="active">
					<a href="#comments" data-toggle="pill">
						<i class="icon-comment"/>
					</a>
				</li>
				<li ui-if="spot.photos.length" >
					<a href="#photos" data-toggle="pill">
						<i class="icon-camera"/>
					</a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="comments">
					<p>{{spot.description}}</p>
				</div>
				<div ui-if="spot.photos.length" class="tab-pane" id="photos">
					<div id="thumbs" class="carousel slide" ui-jq="carousel">
					  <div class="carousel-inner">
						  <div ng-repeat="p in spot.photos" class="item" ng-class="{'active': $first}">
							  <img ng-src="{{p.thumb}}?c" alt="{{p.thumb}}" />
						  </div>
						</div>
						<a class="carousel-control left" href="#thumbs" data-slide="prev">&lsaquo;</a>
						<a class="carousel-control right" href="#thumbs" data-slide="next">&rsaquo;</a>
					</div>
				</div>
			</div>
		</div>
		<div class="span6">
			<div id="mapCanvas" style="height: 54em" ui-map="map"/>
		</div>
	</div>
</div>